<template>
  <div class="header-lay" :style="styles">
    <el-avatar v-if="logo" :src="logo" shape="square" :size="32" :fit="'fill'"
               class="header-logo" />
    <div class="page-title"> {{ title }} </div>
    <div class="flex-lay" />
    <div class="right-lay">
      <el-avatar :icon="user?.headIcon"
                 :src="user?.headUrl"
                 :size="32"
                 style="margin-right: 16px;" />
      <div class="userName">
        {{ user?.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {computed, ref} from "vue";
import router from "@/router";

interface Props {
  logo?: string,
  title?: string,
  headHei: number,
  menus?: MenuType[],
  user?: UserType
}

const props = defineProps<Props>();

const styles = computed(() => {
  return {
    "color": "white",
    "font-size": "14px",
    "height": props.headHei + 'px',
  };
});

</script>

<style scoped>
.header-lay {
  display: flex;
  flex-direction: row;
  background: #fff;
  align-items: center;
  height: auto;
  padding: 0 16px 0;
  font-size: 13px;
  border-bottom: 1px solid #e9e9e9;
}

.header-logo {
  text-align: left;
  margin-right: 16px;
}

.page-title {
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  color: #4d4d4d;
  margin-right: 16px;
}

.span-menu-item {
  opacity: .8;
  color: #efeff1;
  font-size: 13px;
  will-change: opacity,background-color;
  -webkit-transition: opacity .3s,background-color .3s;
  transition: opacity .3s,background-color .3s;
}

.flex-lay {
  flex: 1;
}

.right-lay {
  display: flex;
  flex-direction: row;
  margin-right: 4px;
  align-items: center;
  color: #4d4d4d;
}

.userName {
  font-weight: bold;
}

</style>
